<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户列表</title>
    <meta name="description" content="阜安街道智慧党建平台">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />

    <link rel="stylesheet" href="assets/css/amazeui.min.css" />

    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="assets/js/jquery.min.js"></script>
    <style>
        label{
            font-weight: 500!important;
        }
        #modal1 label{
            padding-right: 30px;
        }
        #from1 table td{
            border: 1px solid #5b779e;
            padding: 0  !important;
            font-size: 16px;
            color: #5f94b4;
            font-weight: 500;
            font-family: serif;
        }
        #from1 table tr{
            height: 40px;
            line-height: 40px;
        }
        #from1 table label{
            color: black;
            margin-bottom: 0 !important
        }
        #from1 table select{
            color: black;
            float: left;
            margin-left: 5px;
        }
        #from1 table input[type="radio"]{
            margin: 3px 3px 0 5px;
        }
     
        .txtcss3 {
    border: 0px;
    font-size: 14px;
    line-height: 25px;
    height: 25px;
    padding: 0px;
    color: #000000;
    word-wrap: break-word;
    word-break: break-all;
}
.yianTable {
    width: 65%;
    background-color: #ecf2ff;
    vertical-align: middle
}
#checkusers table{
    width: 95%;
    margin: 0 auto;
}
#checkusers table td{
    border: 1px solid #999999;
}
#checkusers table  tr td:first-child{
    background-color: #dddddd;
}
    </style>
    <script>
        let name = sessionStorage.getItem("username");
        if (name === null) {
            alert("您还未登录，请登录！");
            window.location.href = "login.html";
        }
    </script>
</head>
<body data-type="index">
<script src="assets/js/theme.js"></script>
<div class="am-g tpl-g">
        <!-- 头部 --> 
    <div id="personSettings"></div>
    <header class="main_header">
    
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="javascript:;">欢迎你, <span id="name"></span> </a>
                    </li>
                    <!--个人设置-->
                    <li class="am-text-sm" data-am-modal="{target: '#settings'}" onclick="settings()">
                        <a href="javascript:;">
                            <span class="am-icon-user"></span> 个人设置
                        </a>
                    </li>
    
                    <!--退出系统-->
                    <li class="am-text-sm" onclick="exit()">
                        <a href="javascript:;">
                            <span class="am-icon-sign-out"></span> 退出系统
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
            <div class="am-panel am-panel-default" id="postId">
                <div class="am-panel-bd" style="display: flex;justify-content: flex-start;align-items: center" rules="users">
                    <a class="flexMenu menu-bg" href="user.html">
                        <img src="assets/img/yhgl.png">
                        <p>用户管理</p>
                    </a>
                            
                    <a class="flexMenu" href="shenfen.html" rules="shenfen">
                        <img src="assets/img/sfgl.png">
                        <p>角色管理</p>
                    </a>
                    
                    <a class="flexMenu" href="access.html" rules="quan"> 
                        <img src="assets/img/access.png">
                        <p>权限管理</p>
                    </a>
                    
                    <a class="flexMenu" href="danwei.html" rules="zuz"> 
                        <img src="assets/img/chuque.png">
                        <p>组织机构</p>
                    </a>

                    <a class="flexMenu" href="data_dictionary.html" rules="jfg">
                        <img src="assets/img/sjzd.png">
                        <p>积分项管理</p>
                    </a>

                    <div class="flexMenu" id="backup">
                        <img src="assets/img/backup.png">
                        <p>返回</p>
                    </div>
            
                </div>
            </div>
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf" >
                <div class="widget-head am-cf" >
                    <div id="tpl-echarts"></div>
                    
                        <button type="button" class="am-btn am-btn-sm am-btn-primary am-radius buildBtn quan_xian" rules="user_add"  data-am-modal="{target: '#users'}">  <i class="am-icon-plus-square"></i>新建</button>
                        <button type="button" class="am-btn am-btn-sm am-btn-secondary am-radius changeBtn quan_xian" rules="user_xiu" data-am-modal="{target: '#users'}" ><i class="am-icon-pencil"></i>修改</button>
                        <button type="button" class="am-btn am-btn-sm am-btn-danger am-radius delBtn quan_xian" rules="user_del"><i class="am-icon-close"></i>删除</button>
                        <button type="button" class="am-btn am-btn-sm am-btn-warning am-radius modifyBtn quan_xian" rules="user_changepwd" data-am-modal="{target: '#my-popup'}"><i class="am-icon-unlock-alt"></i>修改密码</button>
                        <button type="button" class="am-btn am-btn-sm am-btn-secondary am-radius quan_xian" rules="user_output" onclick="exportDataTelement(); "><i class="am-icon-sign-out"></i>导出模板</button>
                        <button type="button" class="am-btn am-btn-sm  am-btn-primary am-radius quan_xian" rules="user_input" onchange="importData()" style="position:relative;"><i class="am-icon-unlock-alt"></i>导入
                            <input type="file" id="daoru" style="opacity:0;cursor: pointer;height: 37px;width: 76px; position: absolute;top: 0;left: 0"></button>
                        <button type="button" class="am-btn am-btn-sm am-btn-success am-radius " onclick="exportData();"><i class="am-icon-unlock-alt"></i>导出</button>
                        <div class="am-u-lg-3" style="float:right;">
                        <div class="am-input-group">
                            <input type="text" class="am-form-field" id="seacrhInput" placeholder="请输入姓名" >
                            <span class="am-input-group-btn">
        <button id="searchValue" class="am-btn am-btn-secondary" type="button"><span class="am-icon-search"></span> </button>
      </span>
                        </div>
                        </div>
               
                    <!-- <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div> -->
                </div>
                <div class="widget-body  widget-body-lg am-fr">
                    <table width="100%" class="am-table-centered  am-table-hover am-table am-table-compact am-table-striped tpl-table-black " >
                        <thead>
                        <tr>
                            <th><input id="checkAll" name="selectAll" type="checkbox"></th>
                            <!-- <th>用户名</th> -->
                            <th>账号</th>
                            <th>姓名</th>
                            
                            <th>单位名称</th>
                            <th>所任职务</th>
                            <th>联系方式</th>
                            <th>用户类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="show">
                        <!-- more data -->
                        </tbody>
                    </table>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr">
                            <ul class="fenye am-pagination tpl-pagination">
                                <li class="am-active"><a class="first" href="#">首页</a></li>
                                <li><a href="#" class="up">上一页</a></li>
                                <li><a href="#" class="down">下一页</a></li>
                                <li><a class="last" href="#">末页</a></li>
                                <li>
                                    <a href="javascript:void(0)" style="border: none;">
                                        页次:<span class="page_1"></span>/<span class="pagenum_1"></span>页
                                        <span class="strip_1"></span>条/页
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" style="padding: 0">
                                        <input class="go_page_1" type="text" value="">
                                    </a>
                                </li>
                                <li class="go_page_search1">
                                    <a href="#">
                                        GO
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加users-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="users">
    <div class="am-modal-dialog yianTable">
        <div class="am-modal-hd " style="padding:15px 10px 30px 10px;">
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>
                <!-- <img style="max-width:40px;" src="assets/img/modalClose.png"> -->
                x
                <!-- &times; -->
            </a>
        </div>
        <div class="am-modal-bd">
            <input type="hidden" id="getUserId">
            <form class=" am-form-horizontal" method="post" enctype="multipart/form-data" id="from1">
                <div class="am-u-lg-12">
                    <div class="wordTable">
                        
                        <h1>用户登记表</h1>
                        
                        <table width="100%" cellspacing="0" cellpadding="0" >
                            <tbody>
                                <tr>
                                    <td width="81">姓&nbsp;名<span class="redStars">*</span></td>
                                    <td colspan="2"><input type="text" id="realname" style="width:150px" class="txtcss3"></td>
                                    <td>账号<span class="redStars">*</span></td>
                                    <td colspan="2"><input type="text" id="username" style="width:150px" class="txtcss3"></td>

                                    <!-- <td>密码<span class="redStars">*</span></td>
                                    <td colspan="2"><input type="text" id="password" class="txtcss3"></td> -->
                                   
                                </tr>
                                <tr>
                                    <td>所属单位<span class="redStars">*</span></td>
                                    <td colspan="2">
                                         <div class="am-input-group">
                                            <input style="border: none!important;background: #eee;height: 30px;margin-top: 5px;" type="text" disabled class="am-form-field" id="pname1">
                                            <input type="hidden" id="pid1">


                                            <span class="am-input-group-btn"><button style="padding: 0;
                                            height: 21px;
                                            line-height: 21px;
                                            background: #e2eaee;
                                            color: #333;
                                            font-size: 14px;
                                            width: 60px;" data-am-modal="{target: '#my-popup2'}" id="btn2" class="am-btn" type="button">选择</button>
                                            </span>
                                        </div>
                                    </td>
                                    <td>现任职务<span class="redStars">*</span></td>
                                    <td colspan="2"><input type="text" id="presasg" style="width:150px" class="txtcss3"></td>
                                </tr>
                                <tr>
                                    <td>身份<span class="redStars">*</span></td>
                                    <td colspan="2"><select id="shenfen"></select></td>
                                    <td>联系方式<span class="redStars">*</span></td>
                                    <td colspan="2"><input type="text" id="phone" class="txtcss3" style="width:150px"></td>
                                    
                                </tr>
                            </tbody>
                        </table>

                        <div style="margin-top: 30px">
                            <button type="button"  id="go" class="btnImg70">确定</button>
                            <button type="button"  id="update" class="btnImg70">确定</button>
                            <button type="reset" class="btnImg60" id="reset">重置</button>
                            <button type="button" data-am-modal-close class="btnImg60">取消</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--模态窗口选择上级节点-->
<div class="am-modal am-modal-no-btn" tabindex="-1" style="z-index: 1301" id="my-popup2">
    <div class="am-modal-dialog" style="width: 400px">
        <div class="am-modal-hd newBuild">
      请选择上级所属组织<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <input type="hidden" id="pname2" value="">
            <input type="hidden" id="pid2" value="">
            <div>
                <ul id="treeDemo2" class="ztree" style="background-color: #cccccc2e; border-radius: 5px"></ul>
            </div>
                    <button id="goz" type="submit" class="am-btn am-radius am-btn-danger">确定</button>
                    <button class="am-btn am-btn-primary am-radius" data-am-modal-close>取消</button>
        </div>
    </div>
</div>
<!--模态窗口提示成功-->
<div  class="am-modal am-modal-alert " tabindex="-1" id="my-alert" style="z-index: 1310">
    <div class="am-modal-dialog">
        <div class="am-modal-hd users"></div>
        <div class="am-modal-bd alert">

        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
<!--修改密码弹窗-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup">
    <div class="am-modal-dialog" style="width: 400px">
        <div class="am-modal-hd newBuild">
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">

            <form class="am-form am-form-horizontal" method="post"  enctype="multipart/form-data" id="form3">
                <div class="am-u-lg-12">

                        <div class="am-form-group">
                            <label class="am-u-sm-4 am-form-label">修改密码</label>
                            <div class="am-u-sm-8">
                                <input type="password" id="password1" class="am-radius"  placeholder="" required>
                            </div>
                        </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-4 am-form-label">确认密码</label>
                        <div class="am-u-sm-8">
                            <input type="password" id="password2" data-equal-to="#password1" class="am-radius"  placeholder="" required>
                        </div>
                    </div>
                </div>

                       
                    <!--data-am-modal="{target: '#my-alert'}"-->
                    <button id="go2" type="submit" class="am-btn am-btn-danger am-radius" >确定</button>
                    <button class="am-btn am-btn-primary am-radius" data-am-modal-close>取消</button>
              

            </form>
        </div>
    </div>
</div>
<!--查看委员信息弹窗-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="checkusers">
    <div class="am-modal-dialog">
        <div class="am-modal-hd newBuild">
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd" style="padding:30px 0;">

            <table width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td>姓名</td>
                    <td id="realname2"></td>
                </tr>
                <tr>
                    <td>账号</td>
                    <td id="username2"></td>
                </tr>
                <tr>
                    <td>单位名称</td>
                    <td id="sex2"></td>
                </tr>
                <tr>
                    <td>职位</td>
                    <td id="organ2"></td>
                </tr>
                <tr>
                    <td>联系方式</td>
                    <td id="presasg2"></td>
                </tr>
                <tr>
                    <td>角色</td>
                    <td id="tel2"></td>
                </tr>
               <!--  <tr>
                    <td>手机号码</td>
                    <td id="phone2"></td>
                </tr>
                <tr>
                    <td>通讯地址</td>
                    <td id="address2"></td>
                </tr>
                <tr>
                    <td>邮编</td>
                    <td id="zip_code2"></td>
                </tr>
                <tr>
                    <td>住宅电话</td>
                    <td id="home_tel2"></td>
                </tr>
                <tr>
                    <td>委员团组</td>
                    <td id="deputy_team2"></td>
                </tr>
                <tr>
                    <td>身份</td>
                    <td id="shenfen2"></td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td id="remark2"></td>
                </tr> -->
            </table>
        </div>
    </div>
</div>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="ztree/js/jquery.ztree.all.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/app1.js"></script>
<script>
    $(function(){
        var zTreeObj;
        var zNodes = [];
        //获取树节点
        $.ajax({
            async: false,
            url: testurl + "/dept/tree/0",
            headers: {"Authorization": "Bearer " + token},
            type: "get",
            contentType: "application/json",
            data: {},
            success: function (data) {
                zNodes = data.obj;
            }
        });
        var setting2 = {
            callback: {
                onClick: zTreeOnClick2
            }
        };
        //获取点击的name
        function zTreeOnClick2(event, treeId, treeNode) {
            $("#pname2").val(treeNode.name);
            $("#pid2").val(treeNode.id);
            console.log($("#pid2").val())
            console.log($("#pname2").val())
        }
        $("#goz").click(function () {
            if ($("#pname2").attr("value") === ""){
                $(".users").html("提示");
                $(".alert").html("请选择上级所属组织！");
                $('#my-alert').modal({target: '#my-alert'});
            } else {
                $("#pname1").val($("#pname2").attr("value"));
                $("#pid1").val($("#pid2").attr("value"));
                $('#my-popup2').modal('close');
            }
        });

        zTreeObj = $.fn.zTree.init($("#treeDemo2"), setting2, JSON.parse(zNodes));

    })
</script>
</body>
</html>